<template>
	<view>
		<view class="title_search">
			<view class="search">
				<input type="text" v-model="searchData" placeholder="请输入水表号/单位名称/地址"/>
				<view class="t-icon t-icon-sousuo icon" @click="searchFn(searchData,showData)"></view>
			</view>
			<view class="reseat" @click="reseat">重置</view>
		</view>
		<view >
			<view class="cont" v-for="item in showData" @click="see(item)">
				<view >
					<view>单位名称</view>
					<text>{{item.qy_name}}</text>
				</view>
				<view >
					<view>更换水表号</view>
					<text>{{item.sb_num}}</text>
				</view>
				<view >
					<view>更换时间</view>
					<text>{{item.sb_geenghuanshijain}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {ref,reactive,computed,toRefs,onMounted,getCurrentInstance} from 'vue'
	import {useStore} from 'vuex'
	export default{
		setup(){
			const {state,getters,commit,dispatch}=useStore();
			const {proxy}=getCurrentInstance();
			let data=reactive({
				searchData:'',
				arry:[],
				showData:[],
				searchFn:(v,arry)=>{
					data.showData=proxy.$search(v,arry);
					data.searchData='';
				},
				reseat:()=>{
					data.showData=[...data.arry];
				},
				see:(v)=>{
					commit('chaobiao/setRecord',v);
					uni.navigateTo({
						url:'../checkRecord/checkRecord'
					})
					
				}
			});
			onMounted(()=>{
				proxy.$http({
					url:'/miniwatermeter/getReplace'
				}).then((res)=>{
					data.arry=[...res.data.data];
					data.showData=[...res.data.data];
					
				})
			})
			return {...toRefs(data)}
		}
	}
</script>

<style lang="scss">
@import url("../../static/chaobiao/iconfont-weapp/iconfont-weapp-icon.css");
	page{
		color: #666666;
	}
.title_search{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.search{
	width: 600rpx;
	margin: 20rpx auto;
	padding: 20rpx;
	border: 2px solid #E4E4E4;
	border-radius: 30rpx;
	box-sizing: border-box;
	display: flex;
	input{
		flex: 1;
	}
	uni-icons{
		width: 40rpx;
	}
}
.icon{
	width: 50rpx;
	height: 50rpx;
	margin-left:40rpx;
}
.reseat{
	width: 100rpx;
	margin: 20rpx ;
	padding: 20rpx;
	text-align: center;
	background-color: #e4e4e4;
	border-radius: 30rpx;
}
.cont{
	border-top: 2px solid #E4E4E4;
	border-bottom: 2px solid #E4E4E4;
	padding: 20rpx 35rpx;
}
.cont>view{
	display: flex;
	margin: 10rpx 0;
}
.cont>view>view{
	width: 200rpx;
	font-weight: 600;
}
</style>
